<template>
    <el-table :data="tableData" 
              style="width: 100%"
              lazy
              table-layout="auto"
              empty-text="您还没有草稿呢 ！">
      <!-- <el-table-column prop="id" label="编号" width="230" :show-overflow-tooltip="false" /> -->
      <el-table-column fixed prop="title" label="标题"  />
      <el-table-column prop="articleImages" label="封面" width="120">
        <template #default="{ row }">
          <img :src="row.articleImages" alt="" style="width: 100%; height: auto;">
        </template>
      </el-table-column>
  
      <el-table-column prop="articleExcerpt" label="主要内容" />
      <el-table-column prop="articleTags" label="标签" />
      <el-table-column prop="articleCategory" label="分类" />
      <el-table-column prop="articleUpdated" label="上次修改时间" sortable />
  
      <el-table-column fixed="right" label="操作" >
        <template #default="{row}">
          <el-button type="primary" size="small" @click="handleClick(row.id)"
            >详情</el-button
          >

          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确定删除?"
            @confirm="deleteClick(row.id)"
            @cancel="cancelEvent"
            >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>

          <!-- <el-button type="danger" size="small" @click="deleteClick(row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup>
  import axios from 'axios'
  import VueCookies from 'vue-cookies'
  import { onMounted } from 'vue';
  import { getCurrentInstance, ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
  const loginInfo = VueCookies.get("loginInfo");
  const account = loginInfo ? loginInfo.account : null; // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null
  const url = 'http://localhost:8081/api/draftBoxArticle';

  const router = useRouter();

  const handleClick = (id) => {
  console.log('click', id)
  setTimeout(() => {
          router.push({
              path : '/deta',
              query: { id: id }
            });
          }, 1000);
  }
  
  const deleteClick = (id) =>{
    try{
      const data = {
        userAccount: account,
        articleId: id
      };
  
      console.log(data.articleId);
  
      axios.post('http://localhost:8081/api/deleteArticle', data)
        .then(response => {
          if (response.data.code === 2000) {
            // TODO: 处理删除成功的情况
            getArticle();
          } else {
            proxy.$message.error(response.data.message);
          }
        })
        .catch(error => {
          proxy.$message.error('删除文章失败');
        });
  
    }catch(e){
      proxy.$message.error('删除文章失败');
    }
  }
  
  const getArticle = async() =>{
    try{
      const data = {
        userAccount: account,
      };
  
      const res = await axios.post(url, data);
  
      if (res.data.code === 2000) {
        tableData.value = res.data.tableData;
      }else {
        proxy.$message.error(res.data.message);
        tableData.value = [];
      }
    } catch(e){
      proxy.$message.error('文章获取失败');
    }
  }
  
  onMounted(() => {
    getArticle();
  });
  </script>


  